<template>
  <div class="common-layout">
      <el-container>
          <el-page-header :icon="null" title=" " class="custom-page-header">
              <template #content>
                  <div class="flex items-center">
                      <el-avatar :size="32" style="margin-right: 15px;" src="img\a.jpg" />
                      <span class="text-large font-600" style="margin-right: 10px;">
                        <span>
                          欢迎  {{aname}}
                        </span>
                      </span>
                      <span class="text-sm" style="margin-right: 10px; color: var(--el-text-color-regular)">
                          让努力感动生命
                      </span>
                      <el-tag class="header-tag">冷静</el-tag>
                  </div>
              </template>
              <template #extra>
                  <div class="flex items-center">
                      <el-button type="primary" class="ml-2 page-btn" link @click="logout">退出</el-button>
                  </div>
              </template>
          </el-page-header>

          <el-container class="main-container">
              <el-aside class="sidebar">
                  <el-menu active-text-color="#409EFF" background-color="#333" class="el-menu-vertical-demo" default-active="2"
                      text-color="#fff" @select="toPage">
                      <el-menu-item index="/index">
                          <el-icon>
                              <House />
                          </el-icon>
                          <span>首页</span>
                      </el-menu-item>

                      <el-sub-menu index="1">
                          <template>
                          </template>
                          <template #title>
                              <el-icon>
                                  <location />
                              </el-icon>
                              <span>图书管理系统</span>
                          </template>
                          <el-menu-item index="/admin">
                              <el-icon>
                                  <User />
                              </el-icon>用户管理</el-menu-item>
                          <el-menu-item index="/book">
                              <el-icon>
                                  <Notebook />
                              </el-icon>书籍管理</el-menu-item>
                          <el-menu-item index="/classify">
                              <el-icon>
                                  <Reading />
                              </el-icon>分类管理</el-menu-item>
                      </el-sub-menu>
                  </el-menu>
              </el-aside>
              <el-main class="content">
                  <RouterView />
              </el-main>
          </el-container>
      </el-container>
  </div>
</template>

<script setup>
import { RouterView, RouterLink } from 'vue-router';
import router from '@/router';
import accountApi from '@/api/accountApi';
import { ref } from 'vue';
import { useTokenStore } from '@/stores/token';


const tokenStore = useTokenStore();

function toPage(indexPath) {
  // 编程式导航
  router.push(indexPath);
}
function logout(){
  //删除store中的token
  tokenStore.$reset();
  //跳转到登录页
  router.push('/login');
}

const aname = ref('');

//获取已登录用户信息
function getLoginInfo(){
  accountApi.getLoginInfo()
  .then(resp => {
    aname.value = resp.data.aname;
  });
}

getLoginInfo();
</script>

<style scoped>
.common-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.el-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.custom-page-header {
  padding: 10px 0;
  width: 100%;
  margin-bottom: 0px;
  background-color: #f0f0f0;
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.sidebar {
  width: 200px;
  flex-shrink: 0;
}

.content {
  flex: 1;
  overflow-y: auto;
}

.header-tag {
  background-color: #409EFF;
  color: white;
  border-radius: 5px;
}

.page-btn {
  border-radius: 5px;
}

.page-btn:hover {
  opacity: 0.8;
}

.el-menu-vertical-demo :hover {
  background-color: #555;
}
</style>